<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一个 Highcharts 图表</title>
</head>

<body>
  <!-- 图表容器 DOM -->
  <div id="container" style="width: 600px;height:400px;"></div>
  <!-- 引入 highcharts.js -->
  <script src="https://code.hcharts.cn/highcharts.js"></script>
  <script>
    // 图表配置
    var options = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: ['奢侈品品牌1', '奢侈品品牌2', '奢侈品品牌3', '奢侈品品牌4']
      },
      // xAxis
      xAxis: {
        type: 'category',
        data: ['月份', '奢侈品品牌销售额']
      },
      // yAxis
      yAxis: {
        type: 'value'
      },
      // series
      series: [{
        name: '奢侈品品牌1',
        type: 'bar',
        data: [1500, 2300, 3500, 4000]
      }, {
        name: '奢侈品品牌2',
        type: 'bar',
        data: [2000, 2600, 3200, 3600]
      }, {
        name: '奢侈品品牌3',
        type: 'bar',
        data: [2500, 2800, 3500, 4000]
      }, {
        name: '奢侈品品牌4',
        type: 'bar',
        data: [2700, 3000, 2600, 2800]
      }]
    }
    // 图表初始化函数
    var chart = Highcharts.chart('container', options);
  </script>
</body>

</html>